<template>
  <div class="bookList">
    <div class="commons_top">
      <div class="commons_back" @click="$router.go(-1)">
        <img src="@/assets/index/back.png" />
      </div>
      <span class="commons_title">{{ title }}</span>
    </div>
    <div
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >
      <div
        class="bookMain_list"
        v-for="(item, index) in commonList"
        :key="index"
      >
        <img
          :src="coverUrl(item.cover)"
          class="bookList_cover"
          @error="errImg('book')"
          @click="linkDet('bookDet', item.id)"
        />
        <div class="bookList_con">
          <div class="bookList_name" @click="linkDet('bookDet', item.id)">
            {{ item.name }}
          </div>
          <div class="bookList_author">
            {{ item.author ? item.author : "暂无" }}
          </div>
          <div class="bookList_rate">
            <el-rate
              v-model="item.score"
              disabled
              text-color="#FFE400"
              :colors="starColor"
              style="float:left;marginRight:0.1rem;marginTop:0.03rem"
            ></el-rate>
            <span class="score_text">{{ item.resourceScore }}</span>
            <span class="rate_num">{{ item.commentNum }}人评分</span>
          </div>
          <div class="bookList_intro">{{ item.synopsis }}</div>
        </div>
      </div>
      <p v-if="loading" class="page-infinite-loading">
        <span>
          <mt-spinner type="fading-circle"></mt-spinner>
          加载中...
        </span>
      </p>
      <p v-else class="loadOver">
        <span v-if="!isNull && isLast">—— 我是有底线的 ——</span>
      </p>
    </div>
  </div>
</template>

<script>
import "@static/css/common.css";
import { Toast } from "mint-ui";
import { getRecommListAPI } from "@/api/index.js";
import { starColor, code } from "@/utils/static.js";

export default {
  data() {
    return {
      starColor,
      code,
      title: null,
      commonList: [],
      listQuery: {
        code: null,
        pageNum: 1,
        pageSize: 10
      },
      totalPage: null,
      loading: false,
      isNull: "",
      isLast: ""
    };
  },
  // watch: {
  //   $route(to, from) {
  //     this.$route.meta.title = this.$route.query.title
  //   }
  // },
  mounted() {
    this.title = this.$route.query.title;
    this.commonList = [];
    this.getRecommBook();
  },
  methods: {
    getRecommBook() {
      //推荐位列表
      this.loading = true;
      let type = this.$route.query.type;
      type == 1
        ? (this.listQuery.code = this.code["recommendBook"])
        : type == 2
        ? (this.listQuery.code = this.code["newBook"])
        : type == 3
        ? (this.listQuery.code = this.code["goodBook"])
        : (this.listQuery.code = this.code["classicsBook"]);
      getRecommListAPI(this.listQuery).then(res => {
        if (res.data.code === 0) {
          var list = [];
          if (this.listQuery.pageNum == 1) {
            list = res.data.data.recommendResourcePage.list;
          } else {
            list = this.commonList.concat(
              res.data.data.recommendResourcePage.list
            );
          }
          this.commonList = list;
          this.totalPage = res.data.data.recommendResourcePage.pages;
          this.isNull = list && list.length > 0 ? false : true;
          this.isLast =
            res.data.data.recommendResourcePage.pages == this.listQuery.pageNum
              ? true
              : false;
        } else {
          Toast(res.data.msg);
        }
        this.loading = false;
      });
    },
    loadMore() {
      if (this.totalPage > this.listQuery.pageNum) {
        this.listQuery.pageNum = this.listQuery.pageNum + 1;
        this.getRecommBook();
      }
    },
    linkDet(name, id) {
      this.navigationFuc(name, { id });
    }
  }
};
</script>

<style>
.bookList .el-rate {
  line-height: 0 !important;
}
.bookList .el-rate__icon {
  margin-right: 0 !important;
  font-size: 14px !important;
}
.bookList .mint-spinner-fading-circle {
  margin: 0 auto;
  margin-bottom: 10px;
}
.bookList .page-infinite-loading {
  text-align: center;
  padding: 10px;
  color: #999999;
  font-size: 14px;
}
.bookList .loadOver {
  height: 0.8rem;
  text-align: center;
  line-height: 0.8rem;
  color: #999999;
  padding: 0.3rem 0;
  font-size: 14px;
}
</style>
<style scoped>
.bookList {
  width: 100%;
  height: 100vh;
}
.bookList_top {
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem;
  padding: 0 0.3rem;
  box-sizing: border-box;
  display: flex;
  position: fixed;
  background: #ffffff;
  z-index: 1000;
}
.bookList_back {
  width: 0.12rem;
  height: 0.22rem;
  margin: auto auto;
}
.bookList_title {
  flex: 1;
  color: #000000;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
.bookMain_list {
  padding: 0.3rem;
  box-sizing: border-box;
  border-bottom: 0.02rem solid #eeeeee;
  display: flex;
}
.bookList_cover {
  width: 1.5rem;
  height: 2.1rem;
  border-radius: 0.1rem;
}
.bookList_con {
  flex: 1;
  margin-left: 0.32rem;
}
.bookList_name {
  width: 5rem;
  font-size: 16px;
  color: #5e5f71;
  overflow: hidden;
  font-weight: bold;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.bookList_author {
  margin: 0.1rem 0 0;
  color: #b2b1c3;
  font-size: 12px;
}
.bookList_rate {
  overflow: hidden;
}
.score_text {
  color: #fd7068;
  font-weight: bold;
  font-size: 14px;
  float: left;
}
.rate_num {
  color: #5e5f71;
  font-size: 14px;
  font-weight: bold;
  margin-left: 0.16rem;
  float: left;
}
.bookList_intro {
  width: 100%;
  color: #5e5f71;
  font-size: 14px;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
}
</style>
